<template>
	<view class="cartLIst">
		<!-- 顶部固定栏 -->
		<view class="titlesHead">
			<view class="iconfont icon-fangxiang-xiangzuo icon" @click="yun"></view>
			<view class="titname"> 乐 居 </view>
			<view class="titRight"></view>
		</view>
		<view class="zhanwei">静安阿达</view>
		<!-- 订单列表 -->
		<view class="dingdanList">
			<view class="Listdetails" v-for="(item,index) in list" :key="item.id">
				<view class="shang">
					<!-- 单选框 -->
					<view class="ipt">

						<evan-checkbox v-model="item.islist"></evan-checkbox>
					</view>
					<!-- 图片 -->
					<view class="imger">
						<image :src="item.productPic" mode=""></image>
					</view>
					<!-- 信息 -->
					<view class="xinxi">
						<view class="unname">
							名称 ： {{item.productName}}
						</view>
						<view class="bianhao">
							编号 ： {{item.productSkuId}}
						</view>
						<view class="pricese">
							价格： ￥ {{item.price}}
						</view>
						<view class="shuliang">
							数量 ： {{item.quantity}}
						</view>
					</view>
				</view>
				<view class="xia">
					<view class="jian" @click="jian(index)">
						-
					</view>
					<view class="numser">
						{{item.quantity}}
					</view>
					<view class="jia" @click="jia(index)">
						+
					</view>
				</view>
			</view>
		</view>
		<!-- 底部固定栏 -->
		<view class="dibu">
			<view class="quanxuan">
				全选
				<evan-checkbox class="ipu" v-model="quanxuan"></evan-checkbox>
			</view>
			<view class="heji">
				合计 : ￥ {{zonNum}}
				<view class="btn">
					<view class="anniu" @click="jiesuan">
						结 算
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		dingdan
	} from '@/api/dingdan/dingdan.js'
	import {
		findAllCartItem
	} from '@/api/cart/cart.js'
	export default {
		data() {
			return {

				// 单个选择框
				islist: false,
				// 列表数据
				list: [],

			};
		},
		computed: {
			// 全选按钮
			quanxuan: {
				get() {
					return this.list.every(ele => ele.islist == true)
				},
				set(val) {
					this.list.forEach(ele => {
						ele.islist = val
					})
				}
			},
			// 计算总价
			zonNum() {
				return this.list.reduce((to, ele) => {
					if (ele.islist) {
						return to + ele.price * ele.quantity
					}
					return to
				}, 0)
			}
		},
		methods: {
			// 返回上一页
			yun() {
				uni.navigateBack({
					delta: 1,
				});
			},
			// 点击 加号
			jia(index) {
				// this.number = this.number + 1
				this.list[index].quantity = this.list[index].quantity + 1
			},
			// 点击 减号
			jian(index) {
				if (this.list[index].quantity - 1 < 1) {
					uni.showModal({
						title: "是否删除该商品",
						success(res) {
							console.log(res)
							if (res.confirm) {
								uni.showToast({
									title: '删除商品这个还没写完回头来补'
								})
							}
						}
					})
				}
				return
				this.number = this.number - 1
			},
			// 点击结算按钮
			jiesuan() {
				// 把选中的商品添加到这个对象里
				var obj = {
					"orderItemList": []
				}
				// 过滤没勾选的商品
				var arr = this.list.filter(ele => ele.islist)
				arr.forEach(ele => {
					obj.orderItemList.push({
						"cartId": ele.id,
						"productId": ele.productId,
						"productQuantity": ele.quantity,
						"productSkuId": ele.productSkuId
					})
				})
				// 把 对象 放入请求接口里
				dingdan(obj).then(res => {
					console.log(res)
					if(res.data.success){
						uni.showToast({
							title:'购买成功',
							duration:1500,
						})
						setTimeout(()=>{
							uni.navigateTo({
								url:`/pages/dingdan/dingdan?id=${res.data.data.orderId}`
							})
						},2000)
					} 
				})
			}
		},
		onLoad() {
			var result = uni.getStorageSync("token");
			// // console.log(result)
			if (result) {
				findAllCartItem().then(res => {
					console.log(res)
					res.data.data.items.forEach(ele => {
						// 向请求来的数据里添加  一个 属性
						ele.islist = false
					})
					this.list = res.data.data.items

				})
			} else {
				uni.showModal({
					title: '登录提示',
					content: "暂未登录，是否立即登录",
					success(res) {
						console.log(res)
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.cartLIst {
		background-color: #f4e8ab;
		height: 100vh;
		position: relative;

		// 头部固定位置
		.titlesHead {
			height: 100rpx;
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			color: white;
			display: flex;
			align-items: center;
			background-color: #135a05;
			z-index: 999;

			.icon {
				flex: 1;
				padding-left: 40rpx;
				box-sizing: border-box;
			}

			.titname {
				flex: 3;
				text-align: center;
			}

			.titRight {
				flex: 1;
			}
		}

		// 头部固定后面占位置的盒子，不要删除哈
		.zhanwei {
			width: 100%;
			height: 100rpx;
			background-color: #135a05;
		}

		// 订单列表
		.dingdanList {
			width: 100%;
			padding: 0 40rpx 170rpx;
			box-sizing: border-box;
			background-color: #f4e8ab;

			.Listdetails {
				width: 100%;
				background-color: #ffffff;
				margin-top: 30rpx;
				border-radius: 30rpx;
				padding: 20rpx;
				box-sizing: border-box;

				.shang {
					display: flex;
					height: 130rpx;
					justify-content: flex-start;
					align-items: center;

					.ipt {}

					.imger {
						width: 130rpx;
						height: 130rpx;
						margin: 0 25rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.xinxi {
						flex: 1;
						font-size: 26rpx;

						.unname {}
					}
				}

				.xia {

					display: flex;
					align-items: center;
					justify-content: flex-end;

					.jian {
						padding: 10rpx 20rpx;
						border-radius: 50%;
						border: 3rpx solid #555555;
					}

					.numser {
						padding: 10rpx 20rpx;
						border-radius: 30rpx;
						margin: 0 30rpx;
						border: 3rpx solid #555555;
					}

					.jia {
						padding: 10rpx 20rpx;
						border-radius: 50%;
						border: 3rpx solid #555555;
					}
				}
			}
		}

		// 底部固定栏
		.dibu {
			width: 100%;
			height: 150rpx;
			background-color: #fdf1f5;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.quanxuan {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.ipu {
					margin-left: 20rpx;
				}
			}

			.heji {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.btn {
					margin-left: 20rpx;

					.anniu {
						font-size: 35rpx;
						font-weight: 700;
						color: #000000;
						border-radius: 40rpx;
						padding: 15rpx 60rpx;
						background-color: #4CD964;
						border: 3rpx solid #4CD964;
					}
				}
			}
		}
	}
</style>
